<template>
	<!-- 最外层容器：全屏背景 -->
	<view style="width:100%;min-height:100vh;background:#f8f9fa;padding:20rpx;box-sizing:border-box;">
		<!-- 卡片容器：居中显示 -->
		<view
			style="max-width:550rpx;margin:100rpx auto;background:#fff;border-radius:24rpx;padding:60rpx 40rpx;box-shadow:0 10rpx 30rpx rgba(0,0,0,0.08);">
			<!-- 标题切换：登录/注册 -->
			<view style="display:flex;justify-content:center;align-items:center;margin-bottom:60rpx;">
				<text style="font-size:36rpx;font-weight:600;padding:0 25rpx;cursor:pointer;"
					:style="{color: isLoginMode ? '#4361ee' : '#666', fontSize: isLoginMode ? '40rpx' : '36rpx'}"
					@click="switchMode(true)">登录</text>
				<text style="color:#eee;font-size:30rpx;margin:0 10rpx;">|</text>
				<text style="font-size:36rpx;font-weight:600;padding:0 25rpx;cursor:pointer;"
					:style="{color: !isLoginMode ? '#4361ee' : '#666', fontSize: !isLoginMode ? '40rpx' : '36rpx'}"
					@click="switchMode(false)">注册</text>
			</view>

			<!-- 表单区域 -->
			<view>
				<!-- 用户名输入框 -->
				<view style="margin-bottom:35rpx;">
					<view
						style="display:flex;align-items:center;border:2rpx solid #eee;border-radius:12rpx;padding:0 25rpx;height:90rpx;">
						<text style="font-size:34rpx;color:#999;margin-right:20rpx;">👤</text>
						<input type="text" v-model="formData.username" placeholder="请输入用户名（≥3位）"
							style="flex:1;height:100%;font-size:28rpx;outline:none;border:none;"
							placeholder-style="color:#ccc;" />
					</view>
					<text style="color:#e63946;font-size:24rpx;margin-top:12rpx;display:block;"
						v-if="errors.username">{{ errors.username }}</text>
				</view>

				<!-- 密码输入框 -->
				<view style="margin-bottom:35rpx;">
					<view
						style="display:flex;align-items:center;border:2rpx solid #eee;border-radius:12rpx;padding:0 25rpx;height:90rpx;">
						<text style="font-size:34rpx;color:#999;margin-right:20rpx;">🔒</text>
						<input :type="showPassword ? 'password' : 'text'" v-model="formData.password"
							placeholder="请输入密码（≥6位）"
							style="flex:1;height:100%;font-size:28rpx;outline:none;border:none;"
							placeholder-style="color:#ccc;" />
						<text style="font-size:26rpx;color:#4361ee;cursor:pointer;padding-left:20rpx;"
							@click="togglePassword">
							{{ showPassword ? '显示' : '隐藏' }}
						</text>
					</view>
					<text style="color:#e63946;font-size:24rpx;margin-top:12rpx;display:block;"
						v-if="errors.password">{{ errors.password }}</text>
				</view>

				<!-- 确认密码（仅注册显示） -->
				<view style="margin-bottom:35rpx;" v-if="!isLoginMode">
					<view
						style="display:flex;align-items:center;border:2rpx solid #eee;border-radius:12rpx;padding:0 25rpx;height:90rpx;">
						<text style="font-size:34rpx;color:#999;margin-right:20rpx;">🔒</text>
						<input :type="showConfirmPwd ? 'password' : 'text'" v-model="formData.confirmPwd"
							placeholder="请确认密码" style="flex:1;height:100%;font-size:28rpx;outline:none;border:none;"
							placeholder-style="color:#ccc;" />
						<text style="font-size:26rpx;color:#4361ee;cursor:pointer;padding-left:20rpx;"
							@click="toggleConfirmPwd">
							{{ showConfirmPwd ? '显示' : '隐藏' }}
						</text>
					</view>
					<text style="color:#e63946;font-size:24rpx;margin-top:12rpx;display:block;"
						v-if="errors.confirmPwd">{{ errors.confirmPwd }}</text>
				</view>

				<!-- 提交按钮 -->
				<button
					style="width:100%;height:96rpx;line-height:96rpx;background:#4361ee;color:#fff;font-size:32rpx;border-radius:12rpx;border:none;"
					:disabled="isLoading" @click="handleSubmit">
					<text v-if="isLoading">处理中...</text>
					<text v-else>{{ isLoginMode ? '登录' : '注册' }}</text>
				</button>

				<!-- 辅助链接 -->
				<view style="margin-top:25rpx;text-align:right;">
					<text style="font-size:26rpx;color:#4361ee;cursor:pointer;" v-if="isLoginMode"
						@click="handleForgotPwd">忘记密码？</text>
					<text style="font-size:26rpx;color:#4361ee;cursor:pointer;" v-else @click="showAgreement">
						注册即同意《用户协议》
					</text>
				</view>

				<!-- 第三方登录区域（仅登录模式显示，真实图标风格） -->
				<view v-if="isLoginMode" style="margin-top:50rpx;padding-top:30rpx;border-top:1rpx solid #eee;">
					<view style="text-align:center;font-size:24rpx;color:#999;margin-bottom:30rpx;">其他登录方式</view>
					<view style="display:flex;justify-content:center;gap:60rpx;">
						<!-- 微信登录：官方绿色+白色微信图标 -->
						<view style="display:flex;flex-direction:column;align-items:center;">
							<view
								style="width:80rpx;height:80rpx;border-radius:50%;background:#07C160;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;"
								@click="loginWithWechat" @touchstart="scaleUp" @touchend="scaleDown">
								<!-- 模拟微信图标：绿色背景+白色"微"字 -->
								<text style="color:#fff;font-size:42rpx;font-weight:bold;">微</text>
							</view>
							<text style="font-size:22rpx;color:#666;margin-top:10rpx;">微信登录</text>
						</view>

						<!-- QQ登录：官方蓝色+白色QQ图标 -->
						<view style="display:flex;flex-direction:column;align-items:center;">
							<view
								style="width:80rpx;height:80rpx;border-radius:50%;background:#12B7F5;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;"
								@click="loginWithQQ" @touchstart="scaleUp" @touchend="scaleDown">
								<!-- 模拟QQ图标：蓝色背景+白色"Q"字 -->
								<text style="color:#fff;font-size:42rpx;font-weight:bold;">Q</text>
							</view>
							<text style="font-size:22rpx;color:#666;margin-top:10rpx;">QQ登录</text>
						</view>

						<!-- 微博登录：官方红色+白色微博图标 -->
						<view style="display:flex;flex-direction:column;align-items:center;">
							<view
								style="width:80rpx;height:80rpx;border-radius:50%;background:#E6162D;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;"
								@click="loginWithWeibo" @touchstart="scaleUp" @touchend="scaleDown">
								<!-- 模拟微博图标：红色背景+白色"微"字 -->
								<text style="color:#fff;font-size:42rpx;font-weight:bold;">微</text>
							</view>
							<text style="font-size:22rpx;color:#666;margin-top:10rpx;">微博登录</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoginMode: true, // 登录/注册模式开关
				isLoading: false, // 加载状态（防止重复点击）
				formData: { // 表单数据
					username: '',
					password: '',
					confirmPwd: ''
				},
				showPassword: true, // 密码显隐状态
				showConfirmPwd: true, // 确认密码显隐状态
				errors: {}, // 错误提示存储
				activeIcon: null // 第三方图标缩放效果临时变量
			};
		},
		methods: {
			// 切换登录/注册模式
			switchMode(isLogin) {
				this.isLoginMode = isLogin;
				// 切换时清空表单和错误
				this.formData = {
					username: '',
					password: '',
					confirmPwd: ''
				};
				this.errors = {};
				this.showPassword = true;
				this.showConfirmPwd = true;
			},

			// 表单验证（确保输入符合规则）
			validateForm() {
				const {
					username,
					password,
					confirmPwd
				} = this.formData;
				const errors = {};

				// 用户名验证
				if (!username.trim()) errors.username = '请输入用户名';
				else if (username.trim().length < 3) errors.username = '用户名至少3位';

				// 密码验证
				if (!password) errors.password = '请输入密码';
				else if (password.length < 6) errors.password = '密码至少6位';

				// 注册模式：确认密码验证
				if (!this.isLoginMode) {
					if (!confirmPwd) errors.confirmPwd = '请确认密码';
					else if (confirmPwd !== password) errors.confirmPwd = '两次密码不一致';
				}

				this.errors = errors;
				return Object.keys(errors).length === 0; // 无错误则通过
			},

			// 提交处理（登录/注册核心逻辑）
			handleSubmit() {
				// 1. 打印日志，确认点击触发（打开控制台可见）
				console.log("按钮点击触发！当前模式：", this.isLoginMode ? "登录" : "注册");

				// 2. 加载中禁止重复点击
				if (this.isLoading) return;
				this.isLoading = true;

				// 3. 表单验证不通过则返回
				if (!this.validateForm()) {
					this.isLoading = false;
					return;
				}

				// 4. 模拟接口请求（1.5秒后完成）
				setTimeout(() => {
					this.isLoading = false;

					if (this.isLoginMode) {
						// 登录成功：提示+跳转目标页面
						uni.showToast({
							title: '登录成功',
							icon: 'success',
							duration: 1500
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/tabBar/news/news',
								fail: (err) => {
									console.error("跳转失败：", err);
									uni.showToast({
										title: '页面路径错误，检查pages.json',
										icon: 'none'
									});
								}
							});
						}, 1500);
					} else {
						// 注册成功：提示+切换到登录模式
						uni.showToast({
							title: '注册成功，请登录',
							icon: 'success',
							duration: 1500
						});
						setTimeout(() => this.switchMode(true), 1500);
					}
				}, 1500);
			},

			// 密码显隐切换
			togglePassword() {
				this.showPassword = !this.showPassword;
			},
			toggleConfirmPwd() {
				this.showConfirmPwd = !this.showConfirmPwd;
			},

			// 忘记密码弹窗
			handleForgotPwd() {
				uni.showModal({
					title: '找回密码',
					content: '请通过手机号接收验证码重置',
					confirmText: '前往重置',
					success: (res) => {
						if (res.confirm) console.log("跳转密码重置页面"); // 实际项目加跳转
					}
				});
			},

			// 用户协议弹窗
			showAgreement() {
				uni.showModal({
					title: '用户协议',
					content: '1. 请勿泄露账号密码；2. 遵守平台规则；3. 隐私受保护',
					showCancel: false
				});
			},

			// 第三方登录 - 微信
			loginWithWechat() {
				this.isLoading = true;
				setTimeout(() => {
					this.isLoading = false;
					uni.showToast({
						title: '微信登录成功',
						icon: 'success',
						duration: 1500
					});
					setTimeout(() => uni.switchTab({
						url: '/pages/index/tabBar/tabcompage/news/news'
					}), 1500);
				}, 1500);
			},

			// 第三方登录 - QQ
			loginWithQQ() {
				this.isLoading = true;
				setTimeout(() => {
					this.isLoading = false;
					uni.showToast({
						title: 'QQ登录成功',
						icon: 'success',
						duration: 1500
					});
					setTimeout(() => uni.switchTab({
						url: '/pages/index/tabBar/tabcompage/news/news'
					}), 1500);
				}, 1500);
			},

			// 第三方登录 - 微博
			loginWithWeibo() {
				this.isLoading = true;
				setTimeout(() => {
					this.isLoading = false;
					uni.showToast({
						title: '微博登录成功',
						icon: 'success',
						duration: 1500
					});
					setTimeout(() => uni.switchTab({
						url: '/pages/index/tabBar/tabcompage/news/news'
					}), 1500);
				}, 1500);
			},

			// 第三方图标触摸缩放效果（点击时放大，松开恢复）
			scaleUp(e) {
				this.activeIcon = e.currentTarget;
				e.currentTarget.style.transform = 'scale(1.1)'; // 放大1.1倍
				e.currentTarget.style.boxShadow = '0 4rpx 12rpx rgba(0,0,0,0.1)'; // 加阴影
			},
			scaleDown() {
				if (this.activeIcon) {
					this.activeIcon.style.transform = 'scale(1)'; // 恢复原大小
					this.activeIcon.style.boxShadow = 'none'; // 移除阴影
				}
			}
		}
	};
</script>

<style scoped>
	/* 空样式块：所有样式已用行内样式实现，避免路径错误 */
</style>